<!-- 支付订单 -->
<template>
  <div>
    <navbar title="支付详情"></navbar>
    <layout-main>
      <div class="weui-panel">
        <div class="weui-panel__bd">
          <div class="weui-media-box weui-media-box_small-appmsg">
            <div class="weui-cells">
              <div class="weui-cell" href="javascript:;">
                <div class="weui-cell__bd weui-cell_primary">
                  <p>订单金额</p>
                </div>
                <div class="weui-cell__ft money">{{ orderAmount }}</div>
              </div>
              <!-- <a class="weui-cell weui-cell_access" href="javascript:;">
                <div class="weui-cell__bd weui-cell_primary">
                  <p>余额支付</p>
                </div>
                <span class="weui-cell__ft">130元</span>
              </a> -->
            </div>
          </div>
        </div>
      </div>
      <div class="weui-panel">
        <div class="weui-panel__hd">其他支付方式</div>
        <div class="weui-panel__bd">
          <div class="weui-media-box weui-media-box_small-appmsg">
            <div class="weui-cells">
              <a
                v-on:click="wxpay"
                class="weui-cell weui-cell_access"
                href="javascript:;"
              >
                <div class="weui-cell__hd"><img src="../assets/icon-wxpay.png" alt=""></div>
                <div class="weui-cell__bd weui-cell_primary">
                  <p>微信支付</p>
                </div>
                <span class="weui-cell__ft"></span>
              </a>
              <a
                v-on:click="alipay"
                class="weui-cell weui-cell_access"
                href="javascript:;">
                <div class="weui-cell__hd"><img src="../assets/icon-alipay.png" alt=""></div>
                <div class="weui-cell__bd weui-cell_primary">
                  <p>支付宝支付</p>
                </div>
                <span class="weui-cell__ft"></span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </layout-main>
  </div>
</template>

<script>
  // UI组件
  import navbar from '../components/Navbar'
  import layoutMain from '../layout'

  // JS依赖
  import weui from 'weui.js'
  import $ from '../assets/util.js'

  export default {
    name: 'payOrder',
    components: {
      navbar,
      layoutMain
    },
    data() {
      return {
        orderAmount: 0,
        paySign: ''
      }
    },
    created() {
      this.orderAmount = this.$store.state.order.data.monthRent
      this.paySign = this.$store.state.orderSubmitted.paySign
    },
    methods: {
      wxpay() {
        $.toPay({
          title: '房租缴纳',
          totalFee: this.orderAmount.toString(),
          bill_no: this.paySign,
          quantity: '1',
          body: '支付成功跳回页面',
          type: '1'
        }, this.paySuccess, this.payFailed)
      },
      alipay() {
        $.toPay({
          title: '房租缴纳',
          totalFee: this.orderAmount.toString(),
          bill_no: this.paySign,
          quantity: '1',
          body: '支付成功跳回页面',
          type: '0'
        }, this.paySuccess, this.payFailed)
      },
      paySuccess() {
        weui.alert('管家会尽快通知您到账情况', {
          title: '支付成功',
          className: 'alert-pay',
          buttons: [{
            label: '确定',
            type: 'primary',
            onClick: () => {
              this.$router.push('rentStatus')
            }
          }]
        })
      },
      payFailed() {
        weui.topTips('支付失败')
      }
    }
  }
</script>

<style lang="less" scoped>
  .weui-panel:first-child {
    margin-top: 10px;
  }

  .weui-panel__hd {
    color: #808080;
    font-size: 12px;
  }

  .weui-cell__hd img {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    display: block
  }

  .weui-cell__ft {
    font-size: 14px;
    color: #808080;
  }

  .weui-cell_primary p {
    font-size: 14px;
    line-height: 14px;
  }

  .money {
    font-size: 18px;
    color: #ff4d07;
  }
</style>
